<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>上传按钮-动画</title>
  </head>
  <body>
    <main>
      <div class="upload-button">
        <svg class="arrow" width="40" height="40" viewBox="0 0 40 40">
          <!-- 进度 -->
          <circle
            cx="50%"
            cy="50%"
            r="19"
            fill="none"
            stroke="#ffffff"
            stroke-width="2"
          ></circle>
          <!-- 箭头 -->
          <!-- 左边的线 -->
          <!-- points="6,20 20,6 34,20" -->
          <!-- points="8,20 18,30 30, 12" -->
          <polyline
            points="6,20 20,6 34,20"
            stroke="#ffffff"
            fill="none"
            stroke-width="2"
            class="arrow-top"
          ></polyline>
          <polyline
            points="8,20 18,30 30,12"
            stroke="#ffffff"
            fill="none"
            stroke-width="2"
            class="checkmark"
          ></polyline>
          <!-- 中间的线 -->
          <line
            x1="50%"
            y1="7"
            x2="50%"
            y2="34"
            stroke="#ffffff"
            stroke-width="2"
            class="middle-line"
          ></line>
        </svg>
        <div class="progress-bar"></div>
      </div>
    </main>
    <script src="index.js"></script>
  </body>
</html>
